<template>
  <div class="dialogue-records-container">
    <!-- 筛选区域 -->
    <div class="dialogue-filter-card">
      <!-- 标题 -->
      <div class="filter-title">
        <h2 class="title-text">对话记录筛选</h2>
        <p class="title-desc">根据关键词和分类快速定位对话内容</p>
      </div>

      <!-- 筛选表单 -->
      <div class="filter-form">
        <!-- 关键词搜索 -->
        <el-input
            v-model="searchValue"
            placeholder="输入对话内容、关键词或ID搜索"
            class="search-input"
            prefix-icon="Search"
            @input="handleSearch"
        />

        <!-- 分类筛选 -->
        <el-select
            v-model="selectedCategory"
            placeholder="选择对话分类"
            class="category-select"
            @change="handleCategoryChange"
        >
          <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

        <!-- 时间范围筛选（补充功能） -->
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="date-picker"
            @change="handleDateChange"
        />
      </div>
    </div>

    <!-- 筛选结果统计 -->
    <div class="result-stats">
      <div class="stat-item">
        <span class="stat-label">总对话数</span>
        <span class="stat-value">{{ totalCount }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">当前筛选结果</span>
        <span class="stat-value">{{ filteredCount }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">敏感内容</span>
        <span class="stat-value sensitive-count">{{ sensitiveCount }}</span>
      </div>
    </div>

    <!-- 对话列表 -->
    <div class="dialogue-list">
      <div
          v-for="(dialogue, index) in filteredDialogues"
          :key="index"
          class="dialogue-item"
          :class="{ 'sensitive-item': dialogue.isSensitive }"
      >
        <!-- 对话头部（ID、分类、时间） -->
        <div class="dialogue-header">
          <span class="dialogue-id">ID: {{ dialogue.id }}</span>
          <el-tag :type="getTagType(dialogue.category)">{{ dialogue.category }}</el-tag>
          <span class="dialogue-time">{{ dialogue.time }}</span>
          <el-tag v-if="dialogue.isSensitive" type="danger" size="small">
            <el-icon><WarningFilled /></el-icon> 敏感内容
          </el-tag>
        </div>

        <!-- 对话内容 -->
        <div class="dialogue-content">
          {{ dialogue.content }}
        </div>

        <!-- 对话标签 -->
        <div class="dialogue-tags">
          <el-tag size="mini" v-for="(tag, tagIdx) in dialogue.tags" :key="tagIdx">
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-if="filteredDialogues.length === 0">
        <el-empty description="暂无符合条件的对话记录" />
      </div>
    </div>
  </div>
</template>

<script setup>
// 1. 引入依赖
import { ref, computed } from 'vue';
import { ElInput, ElSelect, ElOption, ElDatePicker, ElTag, ElEmpty, ElIcon } from 'element-plus';
import { Search, WarningFilled } from '@element-plus/icons-vue';

// 2. 定义响应式数据
const searchValue = ref(''); // 搜索关键词
const selectedCategory = ref('all'); // 选中的分类（默认全部）
const dateRange = ref([]); // 时间范围（开始日期，结束日期）

// 3. 模拟对话数据
const dialogueData = ref([
  {
    id: 'D20241001001',
    category: '学业类',
    time: '2024-10-01 14:30',
    content: '高等数学的微积分部分总是理解不透彻，做题时经常卡壳，有什么好的学习方法吗？',
    tags: ['微积分', '学习方法', '高数'],
    isSensitive: false
  },
  {
    id: 'D20241001002',
    category: '情感类',
    time: '2024-10-01 20:15',
    content: '和好朋友因为误会吵架了，现在双方都在冷战，不知道该怎么主动化解矛盾',
    tags: ['人际关系', '朋友矛盾', '沟通'],
    isSensitive: false
  },
  {
    id: 'D20241002001',
    category: '情感类',
    time: '2024-10-02 09:45',
    content: '最近情绪低落，对任何事情都提不起兴趣，甚至有过极端想法',
    tags: ['情绪问题', '心理疏导'],
    isSensitive: true
  },
  {
    id: 'D20241002002',
    category: '其他',
    time: '2024-10-02 16:20',
    content: '学校图书馆的预约系统总是崩溃，每次想预约座位都很困难',
    tags: ['校园服务', '系统问题'],
    isSensitive: false
  }
]);

// 4. 分类选项
const categoryOptions = ref([
  { label: '全部分类', value: 'all' },
  { label: '学业类', value: '学业类' },
  { label: '情感类', value: '情感类' },
  { label: '其他', value: '其他' }
]);

// 5. 计算属性（筛选对话数据）
const filteredDialogues = computed(() => {
  return dialogueData.value.filter(dialogue => {
    // 关键词筛选：匹配ID、内容、标签
    const matchSearch = searchValue.value
        ? dialogue.id.includes(searchValue.value) ||
        dialogue.content.includes(searchValue.value) ||
        dialogue.tags.some(tag => tag.includes(searchValue.value))
        : true;

    // 分类筛选
    const matchCategory = selectedCategory.value === 'all'
        ? true
        : dialogue.category === selectedCategory.value;

    // 时间筛选（若选择了时间范围）
    const matchDate = dateRange.value.length === 0
        ? true
        : new Date(dialogue.time) >= new Date(dateRange.value[0]) &&
        new Date(dialogue.time) <= new Date(dateRange.value[1]);

    return matchSearch && matchCategory && matchDate;
  });
});

// 6. 统计数据（计算属性）
const totalCount = computed(() => dialogueData.value.length);
const filteredCount = computed(() => filteredDialogues.value.length);
const sensitiveCount = computed(() =>
    filteredDialogues.value.filter(d => d.isSensitive).length
);

// 7. 工具方法
// 根据分类获取标签类型
const getTagType = (category) => {
  switch (category) {
    case '学业类': return 'primary';
    case '情感类': return 'success';
    case '其他': return 'info';
    default: return 'default';
  }
};

// 8. 交互方法（可扩展）
const handleSearch = (value) => {
  console.log('搜索关键词：', value);
  // 可添加防抖、实时搜索等逻辑
};

const handleCategoryChange = (value) => {
  console.log('选中分类：', value);
};

const handleDateChange = (value) => {
  console.log('选中时间范围：', value);
};
</script>

<style scoped lang="scss">
// 全局容器样式
.dialogue-records-container {
  width: 90%;
  max-width: 1400px;
  margin: 24px auto;
  padding: 16px;
  box-sizing: border-box;
}

// 筛选卡片样式
.dialogue-filter-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 24px;

  .filter-title {
    margin-bottom: 20px;

    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0 0 8px 0;
    }

    .title-desc {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }

  .filter-form {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap; // 响应式换行

    .search-input {
      flex: 1;
      min-width: 240px; // 最小宽度，防止过窄
    }

    .category-select {
      width: 180px;
    }

    .date-picker {
      width: 300px;
    }
  }
}

// 统计区域样式
.result-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .stat-label {
      font-size: 14px;
      color: #666;
    }

    .stat-value {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .sensitive-count {
      color: #f56c6c; // 敏感内容红色标识
    }
  }
}

// 对话列表样式
.dialogue-list {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .dialogue-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
    padding: 20px;
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08); //  hover 阴影增强
    }

    // 敏感内容特殊样式
    &.sensitive-item {
      border-left: 4px solid #f56c6c;
    }

    .dialogue-header {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      font-size: 14px;

      .dialogue-id {
        color: #666;
      }

      .dialogue-time {
        margin-left: auto; // 右对齐时间
        color: #999;
      }
    }

    .dialogue-content {
      font-size: 15px;
      color: #333;
      line-height: 1.6;
      margin-bottom: 16px;
      padding: 8px 0;
      border-top: 1px dashed #f0f0f0;
      border-bottom: 1px dashed #f0f0f0;
    }

    .dialogue-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;

      .el-tag--mini {
        background: #f5f7fa;
        color: #666;
        border-color: #e4e7ed;
      }
    }
  }

  // 空状态样式
  .empty-state {
    padding: 60px 0;
    text-align: center;
  }
}

// 响应式适配（小屏幕）
@media (max-width: 768px) {
  .dialogue-records-container {
    width: 100%;
    padding: 8px;
  }

  .dialogue-filter-card .filter-form {
    flex-direction: column;
    align-items: stretch; // 纵向排列时占满宽度

    .search-input,
    .category-select,
    .date-picker {
      width: 100%;
      min-width: unset;
    }
  }

  .result-stats {
    gap: 16px;
    flex-direction: column;
  }

  .dialogue-item .dialogue-header {
    flex-direction: column;
    align-items: flex-start;

    .dialogue-time {
      margin-left: 0;
      margin-top: 8px;
    }
  }
}
</style>